import React, { Component } from 'react';
import '../styles/MyTabbar.css'
import { CheckShieldOutline, AppstoreOutline, AppOutline, UserOutline, FileOutline } from 'antd-mobile-icons'

class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                { pic: <CheckShieldOutline />, text: '店铺' }, { pic: <AppstoreOutline />, text: '分类' },
                { pic: <AppOutline />, text: '全部商品' }, { pic: <FileOutline />, text: '购物车' },
                { pic: <UserOutline />, text: '个人中心' }
            ],
            currentIndex: 1
        }
    }

    // 点击获取下标
    handleClick(index) {
        this.setState({
            currentIndex: index
        }, () => {
            // console.log(this.state.currentIndex);
        })
    }

    render() {
        return (
            <div>
                <div className='footer'>
                    {
                        this.state.tabs.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} key={index} className={`${this.state.currentIndex==index?'active':''}`} >
                                    <span>{item.pic}</span>
                                    <p>{item.text}</p>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        );
    }
}

export default MyTabbar;